<template>
<div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="26">
        <!-- 搜索框 -->
        <el-col :span="3">
          <el-input v-model="listQuery.title" placeholder="请输入课程名称" clearable></el-input>
        </el-col>
        <el-col :span="3.3">
            <el-date-picker
                v-model="listQuery.starttime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-col>
        <el-col  :span="2">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity()">搜索</el-button>
        </el-col>
        <el-col  :span="4">
          <el-button type="primary" icon="el-icon-search" @click="addcoursrs()">新增课程</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="onlinecoursesList" style="width: 98%;margin: 10px auto 0" border :key="onlinecoursesList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">
        <el-table-column label="课程封面" align="center">
            <template slot-scope="{row}" >
                <img v-if="row.img" :src="row.img" @click="bigImage(row.img)"/>
                <!-- <span>{{row.img}}</span> -->
            </template>
        </el-table-column>

        <el-table-column label="课程名称" align="center">
            <template slot-scope="{row}" >
                <span>{{row.title}}</span>
            </template>
        </el-table-column>

        <el-table-column label="课程原价" align="center">
            <template slot-scope="{row}" >
                <span>{{row.original_price}}</span>
            </template>
        </el-table-column>

        <el-table-column label="课程优惠价" align="center">
            <template slot-scope="{row}" >
                <span>{{row.special_price}}</span>
            </template>
        </el-table-column>

        <el-table-column label="库存数量" align="center">
            <template slot-scope="{row}" >
                <span>{{row.quantity}}</span>
            </template>
        </el-table-column>

        <el-table-column label="领取数量" align="center">
            <template slot-scope="{row}" >
                <span>{{row.received_num}}</span>
            </template>
        </el-table-column>

        <el-table-column label="直接推荐收益" align="center">
            <template slot-scope="{row}" >
                <span>{{row.first_money}}</span>
            </template>
        </el-table-column>

        <el-table-column label="间接推荐收益" align="center">
            <template slot-scope="{row}" >
                <span>{{row.second_money}}</span>
            </template>
        </el-table-column>

        <el-table-column label="推荐规则说明" align="center">
            <template slot-scope="{row}" >
                <span>{{row.illustration}}</span>
            </template>
        </el-table-column>

        <el-table-column label="默认推荐" align="center">
            <template slot-scope="{row}" >
                <el-switch
                    v-model="row.status"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#dbdbdb"
                    @change="del(row)">
                </el-switch>
            </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
            <template slot-scope="{row}" >
                <el-button size="mini" type="text" @click="openorder(row)" style="margin: 0">订单</el-button>
                <el-button size="mini" type="text" @click="opencourse(row)" style="margin: 0">详情</el-button>
                <el-button size="mini" type="text" @click="del(row)" style="margin: 0">下架</el-button>
            </template>
        </el-table-column>
    </el-table>
    <add-store ref="showAddStore"/>
    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>
  </div>
</template>
<script>
import addStore from './add'
import store from '@/store'
import {getonlinecourses,del,edit} from '@/api/thk/onlinecourses'
export default {
    name:'',
    components: {
      addStore,
    },
    data(){
        return{
            bigImageSrc: null,
            listQuery:{
                token:store.getters.token,
                starttime:'',
                title:'',
                start_time:'',
                end_time:'',
                page:1,
                pagesize:10,
                online_courses_id:1
            },
            loading: true,
            onlinecoursesList:[],
            List:[]
        }
    },
    created() {
      this.loading=false
      this.getonlinecoursesList()
    },
    inject: ['reload'],
    methods:{
        bigImage(src) {
            if (src!==null) {
            this.$set(this, 'bigImageSrc', src)
            console.log(this.bigImageSrc)
            } else {
            this.$set(this, 'bigImageSrc', null)
            }
        },
        searchActivity(){
            // this.List=this.onlinecoursesList
            // this.getonlinecoursesList()
            let data=this.List
            let that=this
            if(this.listQuery.title!=''){
                this.onlinecoursesList=[]
                data.map(item=>{
                    if(item.title.match(this.listQuery.title)){
                        console.log(this.listQuery.title)
                        that.onlinecoursesList.push(item)
                    }
                })
            }else if(this.listQuery.starttime){
                this.onlinecoursesList=[]
                data.map(item=>{
                    console.log(new Date(this.listQuery.starttime[0]).getTime()/1000,item.start_time)
                    if(new Date(this.listQuery.starttime[0]).getTime()/1000<item.start_time&&item.start_time<new Date(this.listQuery.starttime[1]).getTime()/1000){
                        that.onlinecoursesList.push(item)
                    }
                })
            }
        },
        getonlinecoursesList(){
            let data={}
            if(this.listQuery.starttime!=''){
                data={
                    title:this.listQuery.title,
                    start_time:new Date(this.listQuery.starttime[0]).getTime()/1000,
                    end_time:new Date(this.listQuery.starttime[1]).getTime()/1000,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize
                }
            }else{
                data={
                    title:this.listQuery.title,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize
                }
            }console.log(this.listQuery)
            console.log(new Date(data.start_time))
            this.onlinecoursesList=[]
            getonlinecourses(store.getters.token,data).then(res=>{
                console.log(res.data.list.data,"987")
                this.onlinecoursesList=res.data.list.data
                    this.List=res.data.list.data
            })
        },
        newtime(num){
            return new Date(num*1000).toLocaleString();
        },
        addcoursrs(){
            this.$refs.showAddStore.showAddStoreDialogs("基础信息",'');
        },
        openorder(row){
            this.$refs.showAddStore.showAddStoreDialogs("订单详情",row);za
        },
        opencourse(row){
            this.$refs.showAddStore.showAddStoreDialogs("课程详情",row);
        },
        del(row){
            row.status===1?0:1;
            edit(store.getters.token,row).then(res=>{
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                // this.reload();
            })
        }
    }
}
</script>
<style scoped>
    img{
        height: 50px;
        width: 50px;
        margin-right: 5px;
    }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
</style>
